import React from 'react';
import {
  Row,
  Col
} from 'antd';
import './home.scss';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import { white } from 'ansi-colors';

export default class Home extends React.Component {

  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    let chart1 = echarts.init(document.getElementById('chart1'));
    let chart2 = echarts.init(document.getElementById('chart2'));
    let chart3 = echarts.init(document.getElementById('chart3'));
    
    // 绘制图表
    chart1.setOption({
      // title: { text: 'ECharts 入门示例' },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
    chart2.setOption({
      // title: { text: 'ECharts 入门示例' },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    });
    chart3.setOption({
      color: ['#3398DB'],
      tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }],
      yAxis: [{
        type: 'value'
      }],
      series: [{
        name: '直接访问',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }]
    });
  }

  render() {
    return (
      <div id="page-wrapper">
        <div className="homeTitle">首页</div>

        <Row gutter={16} style={{padding: '0 1rem',margin: '0'}}>
          <Col className="gutter-row" span={6}>
            <div className="homeChunk">
              <div className="homeCarIcon" style={{backgroundColor:'#0099E3'}} >
                <span className="icon iconfont iconfont-size">&#xe60c;</span>
              </div>
              <div className="homeCarWord">
                <span style={{color:'#0099E3'}} >车辆总数量(辆)</span>
                <span>96,457</span>
              </div>
            </div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="homeChunk">
              <div className="homeCarIcon" style={{backgroundColor:'#45D5E6'}}>
                <span className="icon iconfont iconfont-size">&#xe614;</span>
              </div>
              <div className="homeCarWord">
                <span style={{color:'#45D5E6'}}>车辆在线数量(辆)</span>
                <span>8,317</span>
              </div> 
            </div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="homeChunk">
              <div className="homeCarIcon" style={{backgroundColor:'#FFC94C'}}>
                <span className="icon iconfont iconfont-size">&#xe834;</span>
              </div>
              <div className="homeCarWord">
                <span style={{color:'#FFC94C'}}>车辆总行驶里程(km)</span>
                <span>7.9亿</span>
              </div> 
            </div>
          </Col>
          <Col className="gutter-row" span={6}>
            <div className="homeChunk">
              <div className="homeCarIcon" style={{backgroundColor:'#FD7058'}}>
                <span className="icon iconfont iconfont-size">&#xe698;</span>
              </div>
              <div className="homeCarWord">
                <span style={{color:'#FD7058'}}>车辆正在行驶数(辆)</span>
                <span>3,417</span>
              </div> 
            </div>
          </Col>
        </Row>

        <Row className="rowWrapper">
          <Col span={12}>车辆实时在线数量统计</Col>
          <Col span={12}>车辆接入量统计</Col>
        </Row>

        <Row className="rowWrapper">
          <Col span={12}>
            <div id="chart1" style={{ width: 400, height: 250, backgroundColor:'white'}}></div>
          </Col>
          <Col span={12}>
            <div id="chart2" style={{ width: 400, height: 250, backgroundColor:'white'}}></div>
          </Col>
        </Row>
      
        <Row className="rowWrapper">
          <Col span={12}>
            今日车流量统计
          </Col>
        </Row>

        <Row className="rowWrapper">
          <Col span={12}>
            <div id="chart3" style={{ width: 800, height: 230, backgroundColor:'white'}}></div>
          </Col>
        </Row>
      </div>
    );
  }
}